<template>
	<view class="i-search-banner" :style="[viewStyle]">
		<view class="layout ">
			<view class="e-rela" :style="[bodyStyle]">
				<swiper class="swiper" @change="handleChange" circular>
					<block v-for="(item) in option.imgList" :key="item.url">
						<swiper-item class="e-flex-xy-center" :item-id="item.url" @tap="jumpLink(item.link)">
							<view class="swiper-img" :class="[imgClass]">
								<image mode="aspectFit" class="img-item" :src="$fullLink(item.url)">
								</image>
							</view>
						</swiper-item>
					</block>
				</swiper>
				<view class="search-body e-abso bg-white" :style="[searchBoxStyle]" @tap="$goTo('/pages/classify/search/index')">
					<text class="iconfont icon-sousuo e-m-r-20 e-font-28" :style="[{ color: option.searchIconColor }]"></text>
					<text class="e-font-26" :style="[{ color: option.searchTextColor }]">{{ $t('layout.请输入关键词') }}</text>
				</view>
				<view class="indicators e-abso e-flex" :style="indicatorsStyle">
					<view
						class="indicators-item e-m-r-4"
						:class="{ 'indicators-active': item.url + index === currentItemId }"
						v-for="(item, index) in option.imgList"
						:key="index"
					></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref,computed } from 'vue'
	import type { pageLink } from './type'
	import { px2rpx } from './utils'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import { useLayoutCompoments } from './hooks'
	
	type Item = {
		url:string
		link:pageLink
	}
	
	const props = withDefaults(defineProps<{
		hasCustomNavigation ?: boolean
		option : {
			//样式风格
			styleType : 0 | 1 | 2
			//搜索框圆角,单位px
			searchLayoutType: number
			imgList: Item[]
			indicatorsAlign : 'left' | 'center' | 'right'
			backgroundColor: string
			searchBackgroundColor: string
			searchIconColor: string
			searchTextColor: string
			//边距
			paddingTop: number
			paddingBottom: number
			paddingX: number
			//圆角
			radiusTop: number
			radiusBottom: number
		}
	}>(), {
		option: () => ({
			styleType: 0,
			searchLayoutType: 5,
			imgList: [],
			indicatorsAlign: 'center',
			backgroundColor: 'rgba(245, 246, 249, 1)',
			searchBackgroundColor: 'rgba(255, 255, 255, 1)',
			searchIconColor: 'rgba(245, 34, 45, 1)',
			searchTextColor: 'rgba(96, 98, 102, 1)',
			paddingTop: 12,
			paddingBottom: 12,
			paddingX: 10,
			radiusTop: 0,
			radiusBottom: 0,
		})
	})
	
	const currentItemId = ref(0)
	
	const ctx = useCurrentInstance()
	
	const { viewStyle,bodyClass:imgClass,bodyBoxStyle:bodyStyle,jumpLink } = useLayoutCompoments(ctx, props.option)
	
	const searchBoxStyle = computed(() => {
		return {
			borderRadius: px2rpx(props.option.searchLayoutType),
			backgroundColor: props.option.searchBackgroundColor,
			top: px2rpx(props.option.paddingTop + 10),
		}
	})
	
	
	const indicatorsStyle = computed(() => {
	
		switch (props.option.indicatorsAlign) {
			case 'left':
				return 'left: 40rpx'
			case 'center':
				return 'left: 50%;transform: translateX(-50%);'
			case 'right':
				return 'right: 40rpx'
		}
	
	})
	const handleChange = (e : { detail : {currentItemId : number } }) => {
		currentItemId.value = e.detail.currentItemId
	}
</script>

<style scoped lang="scss">
@import '@/components/list/css/layoutCommon.scss';
.layout {
	padding: 20rpx;
	view{
		overflow: hidden;
		.swiper {
			white-space: nowrap;
			height: 420rpx;
			.swiper-img {
				width: 100%;
				height: 420rpx !important;
				.img-item {
					height: 420rpx !important;
				}
			}
		}
		.search-body {
			width: calc(100% - 64rpx);
			padding: 16rpx 40rpx;
			left: 32rpx;
		}
		.indicators {
			bottom: 20rpx;
			z-index: 1;
			.indicators-item {
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				background: #c6ccd7;
			}
			.indicators-active {
				background-color: #989fad;
			}
		}
	}
}
</style>
